<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>物料申请</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="tabs_view">
			<view class="tabs flex align-center">
				<view class="tabs_item flex align-center justify-center" v-for="(v, k) in tabs" :key="k"
					:class="tabs_id == v.id ? 'active_item' : ''" @tap.stop="selectTabs(v.id)">
					{{v.name}}
				</view>
			</view>
		</view>
		
		<template v-if="tabs_id == 1">
			<view class="content_view">
				<view class="breastplate flex align-center justify-between">
					<view class="breastplate_item">
						<view class="breastplate_item_text">台卡</view>
					</view>
					<view class="breastplate_item">
						<view class="breastplate_item_text">胸牌</view>
					</view>
				</view>
				<view class="content_title">收件地址</view>
				<view class="address_info flex align-center justify-between">
					<view class="address_info_item flex align-center">
						<text class="address_text_1">联系人：</text>
						<text class="address_text_2">**禄</text>
					</view>
					<view class="address_info_item flex align-center">
						<text class="address_text_1">联系电话：</text>
						<text class="address_text_2">135****2856</text>
					</view>
				</view>
				<view class="address_info">
					<view class="address_info_item flex align-center">
						<text class="address_text_1">收件地址：</text>
						<text class="address_text_2">河南省郑州市金水区郑东新区农业东路</text>
					</view>
				</view>
			</view>
			
			<view class="content_view">
				<view class="content_title">物料详情</view>
				<view class="details_img"></view>
				<view class="content_title">规格参数</view>
				<view class="address_info flex align-center justify-between">
					<view class="address_info_item flex align-center">
						<text class="address_text_1">正面印刷：</text>
						<text class="address_text_2">下单二维码</text>
					</view>
					<view class="address_info_item flex align-center">
						<text class="address_text_1">反面印刷：</text>
						<text class="address_text_2">免押二维码</text>
					</view>
				</view>
				<view class="address_info">
					<view class="address_info_item flex align-center">
						<text class="address_text_1">台卡尺寸：</text>
						<text class="address_text_2">210mm*148mm*45mm（长*宽*厚）</text>
					</view>
				</view>
				<view class="address_info">
					<view class="address_info_item flex align-center">
						<text class="address_text_1">胸牌尺寸：</text>
						<text class="address_text_2">128mm*81mm*8mm（长*宽*厚）</text>
					</view>
				</view>
				<view class="material_tip">*以上图片仅供参考，以收到实物为准</view>
			</view>
			<view class="page_fo flex align-center justify-between">
				<view class="page_fo_le flex">
					<text class="fo_le_1">合计：</text>
					<text>
						<text class="fo_le_2">￥</text>
						<text class="fo_le_3">350</text>
					</text>
				</view>
				<view class="page_fo_ri flex align-center justify-center">立即申请</view>
			</view>
			<view style="height: 130rpx;"></view>
		</template>
		
		<template v-if="tabs_id == 2">
			<view class="code_content">
				<view class="code_bg">
					<view class="title_info flex justify-center">推荐使用扫码租车</view>
					<view class="code_item">
						<view class="code_item_1">中出行（惠济店）</view>
						<view class="code_item_2"></view>
						<view class="code_item_3">微信/支付宝[扫一扫]立即优惠下单</view>
						<view class="code_logo">
							<image :src='STATIC_URL+"logo.png"' mode=""></image>
						</view>
					</view>
					<view class="setup_list flex align-center justify-center">
						<view class="setup_text flex align-center justify-center">选择租期</view>
						<image class="setup_img" :src='STATIC_URL+"482.png"' mode=""></image>
						<view class="setup_text flex align-center justify-center">选择车辆</view>
						<image class="setup_img" :src='STATIC_URL+"482.png"' mode=""></image>
						<view class="setup_text flex align-center justify-center">完成支付</view>
					</view>
					<view class="pay_list flex align-center justify-center">
						<view class="pay_text"></view>
						<view class="pay_line">x</view>
						<view class="pay_text"></view>
						<view class="pay_line">x</view>
						<view class="pay_text"></view>
					</view>
				</view>
				<view class="code_btn flex align-center justify-center">下载下单海报</view>
			</view>
			
			<view class="code_content">
				<view class="code_bg" style="padding-bottom: 62rpx;">
					<view class="title_info flex justify-center">租车免押金·出行更省心</view>
					<view class="code_item">
						<view class="code_item_1">中出行（惠济店）</view>
						<view class="code_item_2"></view>
						<view class="code_item_3">支付宝[扫一扫]输入金额申请免押</view>
						<view class="code_logo">
							<image :src='STATIC_URL+"logo.png"' mode=""></image>
						</view>
					</view>
				</view>
				<view class="code_btn flex align-center justify-center">下载免押海报</view>
			</view>
			<view style="height: 48rpx;"></view>
		</template>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				"tabs": [{
					name: '平台寄送',
					id: 1
				}, {
					name: '自行打印',
					id: 2
				}],
				"tabs_id": 1,
			};
		},
		computed: {
			
		},
		watch: {},
		onLoad(options) {
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			selectTabs(id) {
				this.tabs_id = id;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.tabs_view {
		background: #FFFFFF;
		padding: 16rpx 24rpx;
		border-radius: 0 0 32rpx 32rpx;
		.tabs {
			background: #f6f7fb;
			padding: 6rpx;
			
			border-radius: 16rpx;
		
			.tabs_item {
				width: 342rpx;
				height: 68rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
			}
		
			.active_item {
				background: #FFFFFF;
				border-radius: 16rpx;
				color: #1A66FA;
			}
		}
	}
	.content_title {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}
	.content_view {
		background: #fff;
		padding: 24rpx;
		border-radius: 16rpx;
		margin: 20rpx 24rpx 0;
		.breastplate {
			margin-bottom: 40rpx;
			.breastplate_item {
				width: 316rpx;
				height: 316rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				position: relative;
				.breastplate_item_text {
					font-weight: 500;
					font-size: 28rpx;
					color: #1A66FA;
					position: absolute;
					left: 20rpx;
					top: 20rpx;
				}
			}
		}
		.address_info {
			margin-top: 24rpx;
			.address_info_item {
				.address_text_1 {
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
				}
				.address_text_2 {
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
				}
			}
		}
		.details_img {
			height: 1000rpx;
		}
		.material_tip {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin: 48rpx 0 24rpx;
		}
	}
	.page_fo {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 10rpx 24rpx 14rpx;
	
		.page_fo_le {
			padding-left: 24rpx;
	
			.fo_le_1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
	
			.fo_le_2 {
				font-size: 24rpx;
				font-weight: bold;
				color: #FF532E;
			}
	
			.fo_le_3 {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF532E;
			}
		}
	
		.page_fo_ri {
			width: 480rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
	
	.code_content {
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 24rpx 0;
		padding: 32rpx 36rpx;
		.code_bg {
			background: url(https://speed.zhongchuxing.com/gjdimages/475.png) no-repeat;
			background-size: 100% 100%;
			border-radius: 28rpx;
			.title_info {
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				padding: 52rpx 0 72rpx;
			}
			.code_item {
				text-align: center;
				width: 516rpx;
				border-radius: 32rpx;
				background: #fff;
				margin: 0 auto;
				padding: 90rpx 0 32rpx;
				position: relative;
				.code_item_1 {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
				.code_item_2 {
					width: 346rpx;
					height: 346rpx;
					margin: 34rpx 0 0;
				}
				.code_item_3 {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 20rpx;
				}
				.code_logo {
					width: 128rpx;
					height: 128rpx;
					position: absolute;
					left: 50%;
					top: -50rpx;
					transform: translateX(-50%);
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.setup_list {
				margin: 22rpx 0 0;
				.setup_text {
					width: 144rpx;
					height: 48rpx;
					background: rgba(255,255,255,0.1);
					border-radius: 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.setup_img {
					width: 34rpx;
					height: 28rpx;
					margin: 0 10rpx;
				}
			}
			.pay_list {
				margin: 28rpx 0 0;
				padding-bottom: 44rpx;
				.pay_text {
					width: 80rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
				}
				.pay_line {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0 16rpx;
				}
			}
		}
		.code_btn {
			width: 632rpx;
			height: 96rpx;
			border-radius: 16rpx;
			border: 1px solid #1A66FA;
			margin: 32rpx auto 0;
			font-weight: 500;
			font-size: 30rpx;
			color: #1A66FA;
		}
	}
	

	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.personalInformation_picker2_0_c2 {
		color: rgba(44, 143, 255, 1);
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: #fff;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
	}
</style>